<!doctype html>
<html lang="en" dir="ltr">
<head>
	<base href="http://127.0.0.1:5000/" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en" />
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

    <title>图片社交网站</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script src="./masonry.pkgd.js"></script>
	<script src="./imagesloaded.pkgd.js"></script>


	<link href="./style.css" rel="stylesheet"  type="text/css"/>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
    <!--script src="./assets/js/dashboard.js"></script-->
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/charts-c3/plugin.js"></script-->
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/maps-google/plugin.js"></script-->
    <!-- Input Mask Plugin -->
    <!--script src="./assets/plugins/input-mask/plugin.js"></script-->
</head>
<body class="">
	<div class="my-3 my-md-5">
	  <div class="container">
	    <div class="row">
	      <div class="col-lg-4">
	        <div class="card card-profile">
	          <div class="card-header" style="background-image: url(p/photos/eberhard-grossgasteiger-311213-500.jpg);"></div>
	          <div class="card-body text-center">
	            <img class="card-profile-img author-img" src="p/faces/lh.jpg">
	            <h3 class="mb-3" id="author-name">李华</h3>
				<p class="mb-4 img-ID" style="display:none;">{{img_id}}</p>
	            <button class="btn btn-outline-primary btn-sm" id="btn1" onclick="fo()">
	              <span class="fa fa-star-o" id="s1">关注</span>
	            </button>
	          </div>
	        </div>
	        <div class="card">
	          <div class="card-header">
	            <h3 class="card-title"><i class="fe fe-user"> </i>详细介绍</h3>
	          </div>
	          <div class="card-body">
	            <form>
					
	              <div class="form-group">
	                 <label class="form-label"><i class="fe fe-map-pin"> </i>描述</label>
	                 <input type="text" class="form-control" id="description" value="your-email@domain.com" disabled="">
	              </div>
	            </form>
				<div class="text-center">
					<button class="btn btn-outline-primary btn-sm" id="btn1" onclick="likethis();">
					  <span class="fe fe-heart" id="like">喜欢</span>
					</button>
					<button class="btn btn-outline-primary btn-sm" id="btn1" >
					   <a id="download" >
						   <span class="fa fa-star-o" >下载</span>
					   </a>
					</button>
				</div>
	          </div>
	        </div>
	      </div>
	      <div class="col-lg-8">
	        <img src="./pic/top3.jpg" id="show-img"></img>
	      </div>
	    </div>
	  </div>
	</div>
	<script>
		var islike = false;
		var b1=true;
		var author_id = -1;
		var img_id = $('.img-ID').text();
		initPage();
		
		function fo(){
		    var s1 = document.getElementById("s1");
			
			$.ajax({
				method: "GET",
				url: "/api/follow?" + 'user_id=' + author_id,
				dataType: "json",
				}).done(function(result) {
					if(result['status'] === 0)
					{
						    s1.innerHTML = "已关注";
						    s1.className = "fa fa-star";
		            }
					if(result['status'] === 3)
					{
						    s1.innerHTML ="关注";
						    s1.className = "fa fa-star-o";
					}
				    alert(result['info']);
				}).fail(function(result) {
					alert("操作失败，请重试");
			});
		
		}
		function likethis()
		{
			$.ajax({
						method: "GET",
						url: "/api/favor?"+'tweet_id=' + img_id,
						dataType: "json",
						contentType: "application/json",
					}).done(function(result) {	
						   let like = $('#like');
						   if(result['status'] === 0)
						   {
							  like.text('已喜欢');
							  like.attr('class','fe fe-heart-o');
						   }
						   if(result['status'] === 3)
						   {
							  like.text('喜欢');
							  like.attr('class','fe fe-heart');
						   }

						   alert(result['info']);
					}).fail(function(result) {
			              alert("点赞失败，请刷新网站");
					});
		}
		
		function initPage()
		{
			$.ajax({
				method: "GET",
				url: "api/seepicinfo/" + img_id,
				dataType: "json",
				}).done(function(result) {
					console.log(result);
					if(result.status === '0')
					{
						let img = $('#show-img');
						let author = $('#author-name');
						let description = $('#description');
						let dl = $('#download');
						let author_img = $('.author-img');
						dl.attr('href','./download/' +  img_id);
						img.attr('src',result['imgaddr']);
						author.text(result['username']);
						author_id = result['author_id'];
						author_img.attr('src',result['userimg'])
						//console.log(result['username']);
						description.val(result['description']);
						if(result['follow'] === 1)
						{
							var s1 = document.getElementById("s1");
							s1.innerHTML = "已关注";
							s1.className = "fa fa-star";
							b1=false;
							
						}
						if(result['like'] === 1)
						{
							let like = $('#like');
							like.text('已喜欢');
							like.attr('class','fe fe-heart-o');
						}
					}
				}).fail(function(result) {
					alert("登录失败，请重试");
			});
		}
	</script>
</body>
</html>
